<template>
<div>
  <div class="tabbar fixedBottom flex flex-evenly">
    <tabbar-item link="/home">
      <img slot="tabbarItemImgNormal" src="@/assets/tabbar/tabbar1.png" alt="">
      <img slot="tabbarItemImgSelected" src="@/assets/tabbar/tabbar1Selected.png" alt="">
      <div slot="tabbarItemText">首页</div>
    </tabbar-item>
    <tabbar-item link="/type">
      <img slot="tabbarItemImgNormal" src="@/assets/tabbar/tabbar2.png" alt="">
      <img slot="tabbarItemImgSelected" src="@/assets/tabbar/tabbar2Selected.png" alt="">
      <div slot="tabbarItemText">分类</div>
    </tabbar-item>
    <tabbar-item link="/car">
      <img slot="tabbarItemImgNormal" src="@/assets/tabbar/tabbar3.png" alt="">
      <img slot="tabbarItemImgSelected" src="@/assets/tabbar/tabbar3Selected.png" alt="">
      <div slot="tabbarItemText">购物车</div>
    </tabbar-item>
    <tabbar-item link="/my">
      <img slot="tabbarItemImgNormal" src="@/assets/tabbar/tabbar4.png" alt="">
      <img slot="tabbarItemImgSelected" src="@/assets/tabbar/tabbar4Selected.png" alt="">
      <div slot="tabbarItemText">我的</div>
    </tabbar-item>
  </div>
</div>
</template>

<script>
import tabbarItem from "./tabbarItem";
export default {
  name: "mainTabbar",
  components:{
    tabbarItem
  },
  methods:{

  }
}
</script>

<style scoped>
.tabbar{
  background-color: #F4F4F4;
  height: 4.5rem;
}
</style>